<template>
	<view class="left">
		<image :class="{play:play}" @click="toggleMusic" :src="`${imgPath}/upload/we/common/music.png`" alt="">
		</image>
	</view>
</template>

<script>
	export default {
		props: ["music_url"],
		data() {
			return {
				audioContext: "",
				info: "",
				play: false,
				imgPath: uni.$http.baseUrl,
			}
		},
		methods: {
			toggleMusic() {
				if (!this.audioContext) {
					// 创建音乐播放实例
					this.audioContext = uni.createInnerAudioContext();
					// 设置音乐资源地址 'https://draw.rxkjcn.com/upload/music/20230923/52ec3ebddea2f8657a8272784369059c.mp3'
					this.audioContext.src = this.imgPath + "/" + this.music_url;
					// 播放音乐
					this.audioContext.play();
					this.play = true;
				} else {
					if (this.play) {
						// 暂停音乐
						this.audioContext.pause();
						this.play = false;
					} else {
						// 继续播放音乐
						this.audioContext.play();
						this.play = true;
					}
				}
			},
			playMusic() {
				this.play = !this.play;

				let audioContext = uni.createInnerAudioContext()
				audioContext.autoplay = true;
				// 设置音乐文件的路径
				audioContext.src = 'https://draw.rxkjcn.com/upload/music/20230923/52ec3ebddea2f8657a8272784369059c.mp3'
				// 播放音乐
				audioContext.play()
				audioContext.pause();
			},
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.left {
		image {
			width: 62rpx;
			height: 62rpx;


			&.play {
				animation: music 4s infinite linear;
			}
		}

	}

	@keyframes music {
		from {
			transform: rotate(0);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>